<template>
  <div class="hello">
      <header-content></header-content>
      <div class="main-content">
        <div class="main-left">
          <left-menu> </left-menu>
        </div>
        <div class="main-right">
          <router-view></router-view>
        </div>
        <div></div>
      </div>
      <text-list></text-list>
      <picltext-list></picltext-list>
      <button @click="changemodel('TextList')">
        切换1
      </button>
      <button @click="changemodel('PicltextList')">
        切换2
      </button>
      <component v-bind:is="which_to_show"></component>  

  </div>
</template>

<script>


    import CarouselModel from '../assembly/subject/carousel'
    import HeaderContent from './headercontent'
    import LeftMenu from './leftmenu'
    import TextList from '../demo/textlist'
    import PicltextList from '../demo/imagelist'
    
export default {
    components: {
        LeftMenu,
        HeaderContent,
        CarouselModel,
        TextList,
        PicltextList,
    },
    mounted(){

    },
  data () {
      return {
        which_to_show: "TextList" 
      }
  },
  methods: {
    changemodel(how){
      this.which_to_show =how
    }
  },

}
</script>

<style scoped>
.main-content{
  overflow: hidden;
  width:100%;
  position: relative;
  min-height: 100%;
}
.main-left{
    float: left;
}
.main-right{
    float: left;
    width: calc(100% - 250px);
    padding: 10px;
    text-align: left;
    word-wrap: break-word;
}
</style>
